<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <button id="btn">获取验证码</button>

    <script>

        // 定时器叠加问题的解决思路
        //     点击多次的时候，会产生多个定时器
        //     解决思路：点击的时候，永远保证只有一个定时器在跑  --- 其他的定时器清除掉
       
        var oBtn = document.getElementById('btn');

        // 10s倒计时
        var count = 10;

        // 定时器声明在外面
        var t = null ;

        // 点击的时候，变成60s倒计时
        oBtn.onclick = function () {
          
            // 清除前面的定时器
            if(t) clearInterval(t) ;
            oBtn.innerHTML = count + 's之后可以再次获取' ;
            t = setInterval(function () {
                count--;
                oBtn.innerHTML = count + 's之后可以再次获取';
                if (count <= 0) {
                    clearInterval(t);
                    oBtn.innerHTML = '获取验证码';
                    count = 10 ;   // 准备下一次的倒计时
                }
            }, 1000)
        }



        // 点击第一次   没有清除      10 9 8 7  
        // 点击第二次的   清除上一个   启动新的定时器   6 5 4 3 2 1 0

        // 此方法的问题：一直点击的时候，就一直重新计时  




    </script>

</body>

</html>